<template>
	<view style="height: 100%;background-color: #fff;">
		<view class="uni-common-mt" style="padding: 20px;">
			<!-- <view class="uni-form-item uni-column" style="display: flex;border-bottom: 1px solid #eee;">
				<input style="padding: 10px;" class="uni-input" value="姓名" disabled="true" />
				<view style="flex: 5;text-align: right;">
					<input style="padding: 10px;color: gray" class="uni-input" v-model="username"
						placeholder="请输入账号" />
				</view>
			</view> -->
			
			<view class="uni-form-item uni-column" style="display: flex;border-bottom: 1px solid #eee;">
				<input style="padding: 10px;" class="uni-input" value="手机号" disabled="true" />
				<view style="flex: 5;text-align: right;">
					<input type="number" style="padding: 10px;color: gray" class="uni-input" v-model="mobile_number"
						placeholder="请输入手机号" />
				</view>
			</view>
			
			<view class="uni-form-item uni-column" style="display: flex;border-bottom: 1px solid #eee;">
				<input style="padding: 10px;" class="uni-input" value="密码" disabled="true" />
				<view style="flex: 5;text-align: right;">
					<input type="password" style="padding: 10px;color: gray" class="uni-input" v-model="password"
						placeholder="请输入密码" />
				</view>
			</view>
			
			<view class="uni-form-item uni-column" style="display: flex;border-bottom: 1px solid #eee;">
				<view style="flex: 3;line-height: 42px;"><input style="padding: 10px;" class="uni-input" value="验证码" disabled="true" /></view>
				<view style="flex: 5;text-align: right;">
					<input type="number" style="padding: 10px;color: gray" class="uni-input" v-model="code"
						placeholder="请输入验证码" />
				</view>
				<view style="flex: 3;text-align: right;">
					<button style="padding: 5px 10px;margin-top: 5px;" @click="sendCode" size="mini">发送短信</button>
				</view>
			</view>
			
			
			<button style="margin-top: 40px;" type="primary" @click="postSignup">提交注册</button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				mobile_number: '',
				password: '',
				code: '',
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		methods: {
			sendCode() {
				if (this.mobile_number == '') {
					return;
				}
				this.$api.postSendCode({
					mobile_number: this.mobile_number,
				}).then(res => {
					if (res.meta.code == '000') {
						uni.showToast({
							title: res.meta.msg,
							duration: 2000,
							icon: 'none',
						})
					}
				})
			},
			postSignup() {
				if (this.mobile_number == ''
				|| this.password == ''
				|| this.code == ''
				) {
					return;
				}
				let that = this;
				this.$api.postSignup({
					password: this.password,
					mobile_number: this.mobile_number,
					code: this.code,
				}).then(res => {
					// todo
					if (res.meta.code == '000') {
						uni.setStorageSync('uid', res.data.id);
						uni.setStorageSync('access_token', res.data.access_token);
						uni.redirectTo({
							url: '/pages/user/signin'
						});
					}
				}).catch(e => {
					
				})
			}
		}
	}
</script>

<style>
	
	.txt {
		display: inline-block;
		position: relative;
		font-size: 14px;
		padding: 0 20px;
		color: gray;
	}
	.txt:nth-child(2) {
		padding-right: 0;
	}
	
	.txt:nth-child(1)::after {
		content: "";
		width: 1px;
		height: 80%;
		position: absolute;
		top: 10%;
		right: 0;
		background: gray;
	}
</style>
